<template>
  <div class="containerBox">
    <div class="t-header">
      <div class="t-title">警快办注册送水数据统计平台</div>
    </div>
    <div class="c-content">
      <img src="../assets/img/loginLogo.png" alt="">
      <div style="width: 200px"></div>
      <!-- 登录 -->
      <div class="login-card">
        <el-form :model="loginForm" :rules="rulesLogin" ref="loginForm">
        <div style="padding: 0 40px">
          <div class="login-title">管理员登录</div>
          <el-form-item prop="username" style="margin-top: 20px">
            <el-input :validate-event="false" @keyup.enter.native="login" v-model.trim="loginForm.username" class="l-input" size="samll" placeholder="输入账号"></el-input>
          </el-form-item>
          <el-form-item prop="password" style="margin-top: 30px">
            <el-input :validate-event="false" @keyup.enter.native="login" type="password" v-model.trim="loginForm.password" class="l-input" size="samll" placeholder="输入密码"></el-input>
          </el-form-item>
          <el-row :gutter="20" style="margin-top: 30px">
            <el-col :span="17">
              <el-form-item prop="vercode">
               <el-input :validate-event="false" @keyup.enter.native="login" v-model.trim="loginForm.vercode" class="l-input" style="margin-right: 10px" size="samll" placeholder="验证码"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <img @click="getCode" ref="img" :src="vercodeSrc" style="width: 100%;height: 36px">
            </el-col>
          </el-row>
          <div style="height:20px"></div>
          <el-button :loading="loading" type="primary" size="samll" class="login-btn" @click="login">立即登录</el-button>
        </div>
      </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { _Login } from '../api/api'
// import { CLONEDEEP } from '../util/util'
export default {
  data () {
    return {
      vercodeSrc: process.env.VUE_APP_BASE_URL + '/User/GetImageCode?' + Math.random(),
      loading: false,
      loginForm: { username: '', password: '', vercode: '' },
      rulesLogin: {
        username: [
          { required: true, message: '用户名不能为空', targger: 'blur' }
          // { min: 6, max: 30, message: '密码长度在 6 到 30 个字符', trigger: 'blur' }
          // { pattern: /^1[345789]\d{9}$/, message: '请输入正确的手机号' }
        ],
        password: [
          { required: true, message: '密码不能为空', targger: 'blur' }
        ]
      }
    }
  },
  mounted () {
    this.getCode()
  },
  computed: {
  },
  watch: {
  },
  methods: {
    getCode () {
      this.loginForm.vercode = ''
      this.vercodeSrc = process.env.VUE_APP_BASE_URL + '/User/GetImageCode?' + Math.random()
    },
    async login () {
      if (this.loading) return
      this.loading = true
      this.$refs.loginForm.validate(async (valid) => {
        if (valid) {
          const loginData = {
            sLoginAccount: this.loginForm.username,
            sPassword: this.loginForm.password,
            sCode: this.loginForm.vercode
          }
          const res = await _Login(loginData)
          if (res.success) {
            window.sessionStorage.setItem('token', res.data.Token)
            window.sessionStorage.setItem('userName', res.data.sLoginAccount)
            window.sessionStorage.setItem('auth', res.data.iType)
            this.$store.dispatch('setUserName', res.data.sLoginAccount) // vuex保存用户名
            this.$message({ message: '登录成功', type: 'success' })
            this.$router.push('/index')
          } else {
            this.$message.error(res.info)
            // 验证码错误 重新获取
            this.getCode()
          }
        }
        this.loading = false
      })
    }
  }
}

</script>
<style lang="less">
.containerBox{
  /* background-image: url('../assets/img/bg.png');
  background-size:100% 100%;
  background-repeat: no-repeat; */
  min-width: 1200px;
  width: 100%;
  height: 100vh;
  background-color:#FFF8F8F8;
  overflow: hidden;
}
.t-header{
  width: 100%;
  height: 100px;
  background: #FFFFFFFF;
  display: flex;
  align-items: center;
}
.t-title{
  font-size: 28px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #222222;
  line-height: 40px;
  padding-left: 360px;
}
.c-content {
  width: 100%;
  height: 600px;
  background: #273447;
  display: flex;
  justify-content: center;
  align-items: center;
}
.c-content img {
  width: 576px;
  height: 460px;
}
.login-card {
  width: 450px;
  height: 420px;
  background: #FFFFFF;
  box-shadow: 0px 5px 20px 0px rgba(5, 15, 97, 0.1);
  border-radius: 6px;
}
.login-title {
  text-align: left;
  font-size: 30px;
  margin-top: 50px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #364B73;
}
.l-input.el-input__inner {
  padding: 0 21px
}
.login-btn {
  margin-top: 50px;
  width: 100%;
}
/* .line-btn {
  padding-top: 10px ;
  cursor: pointer;
  text-align: left;
  color: @themeColor;
}
.line-btn:hover{
  color: @themeTextColor;
} */
  /* .el-input__inner::placeholder {
      color: black !important;
  } */
// .l-input input{
//   background: #FFFFFF !important;
//   // border: 1px solid @themeColor;
// }

// .l-input input:focus {
//   // border: 1px solid #fff !important;
//   // outline: 0;
// }
</style>
